<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
        <div id="app">
            <com v-if="flag"> </com>
        </div>
        <script>
     Vue.component('com',{
            template:'<div><h1>{{con}}</h1> <button @click="changeData">修改</button> </div>',
            data:function(){
                return {
                    con:'hello component',
                }
            },        
            methods:{
                changeData:function(){
                    this.con = 'hello Vue';
                }
            },

            beforeCreate:function(){
                console.log('beforeCreate');
            
                // Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
                // beforeCreate这个钩子函数可以做ajax请求，对数据进行绑定
            },
            created(){
                console.log('created');
                // 数据data和方法methods绑定到vm对象上
                // 还没渲染到视图上
           
            },
            beforeMount(){
                console.log('beforeMount');
            
            },
            mounted(){
                console.log('mounted');
                // 渲染之后
           
            },
            beforeUpdate() {
                // 数据更改，但内容未更改之前
                console.log('beforeUpdate');
            },
            updated:function(){
                // 内容已更新完毕
                console.log('updated');
            },
            beforeDestroy() {
                // 应用销毁之前
                console.log('beforeDestory');
            },
            destroyed() {
                // 应用销毁之后
                console.log('destoryed');
            },
        });

            var vm = new Vue({
                el:'#app',
                data:{
                    flag:true,
                },
            
      
            })

        // 组件可能会多次使用，要返回一个新对象
        </script>
</body>
</html>